<template>
  <div class="hello">
    <el-container direction="vertical">
      <!-- 上部 -->
      <el-header>
        <div class="top-nav">
          <div class="ft14">
            <el-link href="#" type="primary"
              class="link ft18">数字后勤服务大厅</el-link>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <el-link href="#">运驾中心</el-link>&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;
            <el-link href="#">服务监督</el-link>&nbsp;&nbsp;&nbsp;&nbsp;-&nbsp;&nbsp;&nbsp;&nbsp;
            <el-link href="#">膳食服务</el-link>
          </div>
          <div class="login-register" v-if="token==null">
            <el-link href="/login" type="primary" class="no-underline">
              <i class="el-icon-user"></i> 登录
            </el-link>
            <span class="separator">|</span>
            <el-link href="/register" type="primary" class="no-underline">注册</el-link>
          </div>
          <div class="login-register" v-if="token != null">
            <el-dropdown trigger="hover" @command="handleCommand">
              <!-- 头像 -->
              <div class="user-info">
                <el-image
                  :src="userImg !== 'null' ? userImg : 'https://lyz-114.oss-cn-chengdu.aliyuncs.com/user-img.jpg'"
                  style="width: 40px; height: 40px; border-radius: 50%" />
                <span class="user-name">{{ userName }}</span>
              </div>

              <!-- 下拉菜单 -->
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
        <div class="container">
          <el-row class="row">
            <el-col :span="12">
              <div class="repair-logo pull-left mar-t30"></div>
            </el-col>
            <el-col :span="12">
              <!-- Menu -->
              <div class="pull-left repair-menu">
                <div class="repair-home menu-box">
                  <div class="box1 tab-bg" @click="repairRoute()" @mouseenter="showRepairHome = true"
                    @mouseleave="showRepairHome = false"
                    :class="{ 'fade-in': showRepairHome, 'fade-out': !showRepairHome }">
                    我的报修<br />
                  </div>
                  <div class="icon txt" @click="repairRoute()" @mouseenter="showRepairHome = true"
                    @mouseleave="showRepairHome = false">
                    <img src="../assets/img/icon-home.png" />
                  </div>
                </div>
                <div class="repair-notice menu-box">
                  <div class="box1" @click="handleClick" @mouseenter="showRepairNotice = true"
                    @mouseleave="showRepairNotice = false"
                    :class="{ 'fade-in': showRepairNotice, 'fade-out': !showRepairNotice }">通知公告</div>
                  <div class="icon" @click="handleClick" @mouseenter="showRepairNotice = true"
                    @mouseleave="showRepairNotice = false">
                    <img src="../assets/img/icon-notice.png" />
                  </div>
                </div>
                <div class="repair-guide menu-box">
                  <div class="box1" @mouseenter="showRepairGuide = true" @mouseleave="showRepairGuide = false"
                    :class="{ 'fade-in': showRepairGuide, 'fade-out': !showRepairGuide }"></div>
                  <div class="icon" @mouseenter="showRepairGuide = true" @mouseleave="showRepairGuide = false">
                    <img src="../assets/img/icon-guide.png" />
                  </div>
                </div>
                <div v-else class="repair-user menu-box">
                  <div class="box1 tab-bg" @mouseenter="showRepairUser = true" @mouseleave="showRepairUser = false"
                       :class="{ 'fade-in': showRepairUser, 'fade-out': !showRepairUser }"></div>
                  <div class="icon txt" @mouseenter="showRepairUser = true" @mouseleave="showRepairUser = false">
                    <img src="../assets/img/icon-user.png" />
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-header>
      <!-- 中部 -->
      <el-main>
        <router-view v-if="$route.meta.requiresAuth || $route.name"></router-view>
        <div v-else class="placeholder">
          <p>请选择一个选项以查看内容。</p>
        </div>
      </el-main>
      <!-- 下部 -->
      <el-footer>
        <div class="container">
          <p class="footer01 ft12 ft-grey6 row">
            版权所有：西南大学资产经营公司 (渝ICP 06005063号)
            重庆市北碚区天生路2号 邮编：400715
          </p>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios'
import '@/assets/css/index.css'
export default {
  name: 'MainComponent',
  props: {
    msg: String
  },
  data() {
    return {
      dataFromBackend: null,
      isLoggedIn: false,
      showRepairHome: false,
      showRepairNotice: false,
      showRepairGuide: false,
      showRepairUser: false,
      menuItems: [
        { title: '首页', subtitle: 'Home', icon: require('@/assets/img/icon-home.png'), show: false, tabBg: true, class: 'repair-home', route: '/' },
        { title: '通知公告', subtitle: 'Notice', icon: require('@/assets/img/icon-notice.png'), show: false, tabBg: false, class: 'repair-notice', route: '/notice-list' },
        { title: '服务指南', subtitle: '', icon: require('@/assets/img/icon-guide.png'), show: false, tabBg: false, class: 'repair-guide', route: '/guide' },
        { title: '用户中心', subtitle: '', icon: require('@/assets/img/icon-user.png'), show: false, tabBg: true, class: 'repair-user', route: '/user' },
      ],
      token: null,
      roleName: null,
      userName: null,
      userImg: null,
      adminName: null,
    }
  },
  created() {
    /* this.fetchData() */
  },
  mounted() {
    this.token = localStorage.getItem('token');
    if (this.token==null){
      confirm("请先登录");
      this.$router.push('/UserLogin');
    }
    this.roleName = localStorage.getItem('roleName');
    this.userName = localStorage.getItem('userName');
    this.userImg = localStorage.getItem('userImg');
  },
  methods: {
    repairRoute(){
      if (this.roleName === '维修员'){
        this.$router.push('/repair-list-worker');
      }else {
        this.$router.push('/repair-list-user');
      }
    },
    async fetchData() {
      try {
        const response = await axios.get('https://api.example.com/data') // 替换为实际的 API 地址
        this.dataFromBackend = response.data
      } catch (error) {
        console.error('Error fetching data:', error)
      }
    },
    handleCommand(command) {
      if (command === "logout") {
        this.logout();
      }
    },
    logout() {
      console.log("退出登录");
      // 这里写退出登录逻辑，例如清空 token，跳转到登录页等
      localStorage.clear()
      this.$router.push('/UserLogin');
    },
    showItem(index) {
      this.menuItems[index].show = true
    },
    hideItem(index) {
      this.menuItems[index].show = false
    },
    onImageError(item) {
      console.error(`Image not found for item: ${item.title}, path: ${item.icon}`)
      item.icon = require('@/assets/img/repair-bg.png') // 设置默认图片
      // 进一步调试信息
      if (process.env.NODE_ENV === 'development') {
        console.log('Current menu items:', this.menuItems)
        console.log('Current item:', item)
      }
    },
    handleCenter(){
      const roleName = localStorage.getItem('roleName'); // 从本地存储中获取 roleId
      if (roleName === '维修员') {
        this.navigateTo('/individual-center');
      } else {
        this.navigateTo('/user');
      }
    },
    handleClick(){
      const roleName = localStorage.getItem('roleName'); // 从本地存储中获取 roleId
      if (roleName === '管理员') {
        this.navigateTo('/notice-admin');
      } else {
        this.navigateTo('/notice-list');
      }
    },
    navigateTo(route) {
      this.$router.push(route)
    }
  }
}
</script>

<style scoped>
/* styles.css */

.el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
}

.hello {
  background-color: #02507e;
}

.text {
  font-size: 14px;
}

.link {
  font-size: 18px;
}

.pull-left {
  float: left !important;
}

.pull-right {
  float: right !important;
}

.user-box {
  margin-right: 1%;
  height: 50px;
  line-height: 50px;
}

.user-box .b-login {
  color: #999;
}

.user-box i {
  float: left;
  margin-top: 10px;
  margin-right: 10px;
  background: url(@/assets/img/icon-userimg.png) no-repeat;
  width: 30px;
  height: 30px;
  display: inline-table;
}

.user-box i img {
  vertical-align: top;
}

.user-box .a-login {
  position: relative;
}

.user-box .a-login .label {
  position: absolute;
  top: 5px;
  right: -7px;
  text-align: center;
  font-family: "Arial, Helvetica, sans-serif";
  font-size: 6px;
  padding: 2px 3px;
  line-height: .9;
}

[hidden],
template {
  display: none;
}

.label-danger {
  background-color: #d9534f;
}

.label-danger[href]:hover,
.label-danger[href]:focus {
  background-color: #c9302c;
}

.img-circle {
  border-radius: 50%;
}

.repair-logo {
  background: url(@/assets/img/logo-repair.png) no-repeat;
  width: 370px;
  height: 60px;
  margin-top: 30px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.mar-t30 {
  margin-top: 30px;
}

.repair-menu {
  margin-top: 1px;
  margin-left: 10%;
  height: 104px;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: 2px;
  text-align: center;
  position: absolute; /* 使用绝对定位 */
  right: 0; /* 右对齐 */
}

.repair-menu>div {
  width: 66px;
  float: left;
  margin-right: 1px;
}

.repair-menu .icon {
  position: absolute;
  bottom: 0;
  width: 66px;
  height: 44px;
  line-height: 40px;
}

.menu-box {
  position: relative;
  overflow: hidden;
  height: 104px;
  cursor: pointer;
}

.menu-box .txt-box {
  display: block;
  background-color: transparent;
  -webkit-transition: border .2s ease-in-out;
  -o-transition: border .2s ease-in-out;
  transition: border .2s ease-in-out;
  padding: 0;
  margin: 0;
}

.menu-box .txt-box span.no-space {
  display: block;
  margin: 0;
  line-height: 1.2;
}

.repair-home .icon,
.repair-home .txt-box {
  background: rgba(60, 146, 220, 1);
}

.repair-notice .icon,
.repair-notice .txt-box {
  background: rgba(55, 180, 230, 1);
}

.repair-guide .icon,
.repair-guide .txt-box {
  background: rgba(95, 190, 130, 1);
}

.repair-user .icon,
.repair-user .txt-box {
  background: rgba(240, 160, 50, 1);
}

/*下部样式*/
.footer01 {
  margin-bottom: 15px;
  border-top: 1px #ddd solid;
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.ft12 {
  font-size: 12px;
}

.ft-grey6 {
  color: #666;
}

.ft-grey6 a {
  color: #666;
}

.ft-grey6 a:hover {
  color: #258ecb;
  text-decoration: none;
}

.row:before,
.row:after {
  display: table;
  content: " ";
}

/* 新增样式 */
.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.ft14 {
  display: inline-block;
  /* 使元素成为行内块元素以便居中 */
  text-align: left;
  /* 确保内部文本左对齐 */
}

.el-link {
  color: #bfe4fa;
  /* 设置链接颜色 */
}

.el-link:hover {
  color: #fff;
  /* 设置链接悬停颜色 */
  text-decoration: none;
  /* 去掉下划线 */
}

.login-register {
  display: flex;
  align-items: center;
  gap: 10px;
}

.separator {
  color: #fff;
  /* 设置竖线颜色 */
  font-size: 16px;
}

/* 图标样式 */
.el-icon-user {
  margin-right: 5px;
}

/* 占位符样式 */
.placeholder {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #999;
}
.el-main{
  min-height: 700px;
}
.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.user-name {
  margin-left: 10px;
  font-size: 14px;
  color: #fff;
}

.el-dropdown-menu {
  width: 120px;
}
</style>
